<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计分析</title>
    <link rel="stylesheet" href="lib/element-ui/index.css">
    <script src="lib/vue/vue.js"></script>
    <script src="lib/element-ui/index.js"></script>
    <script src="lib/axios.min.js"></script>
    <script src="lib/echarts.min.js"></script>
    <script src="js/constants.js"></script>
    <style>
        html {
            padding: 0;
            margin: 0;
            overflow-x: hidden;
        }
        body {
            padding: 0;
            margin: 0;
            padding: 0 2%;
            background-color: #f6f7fb;
        }
        #app {
            position: relative;
            margin-top: 10px;
            font-family: "Microsoft JhengHei";
        }
        .dqy{
            width: 96%;
            height: 5%;
            left: 2%;
            top: 0.5%;
            font-size: 2.5vh
        }
        .el-range-editor.el-input__inner {
            padding: 2px 10px !important;
        }
        #fg-enterprise-situation {
            width: 300px;
            height: 280px;
            overflow: hidden;
        }
        #fg-review-situation {
            width: 360px;
            height: 280px;
            overflow: hidden;
        }
        #streetStaff {
            width: 360px;
            height: 280px;
        }
        #systemPie {
            width: 350px;
            height: 280px;
        }
        #industryStaff {
            width: 800px;
            height: 280px;
        }
        #fg-industry-situation {
            width: 540px;
            height: 280px;
            overflow: hidden;
        }
        .num-total {
            width: 220px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #00a2d4;
            color: white;
            margin: 50px auto;
        }
        .tool .el-card__body {
            padding: 10px 15px !important;
        }
        .el-card__body {
            padding: 0px !important;
        }
        .title {
            margin: 0 !important;
            display: block;
            background: linear-gradient(to right, #F1F7FE, #ffffff);
            font-size: 20px;
            line-height: 20px;
        }
        .title span {
            position: relative;
            top: -10px;
            padding-left: 10px;
            font-weight: bold;
        }
        .title:before {
            width: 6px;
            height: 40px;
            content: ' ';
            display: inline-block;
            background: #0d9FF8;
        }
    </style>
</head>
<body>
    <div class="dqy"><span>当前页：统计分析</span></div>
    <div id="app" v-cloak  v-loading="loading">
        <el-row style="margin-bottom: 20px" :gutter="20" class="tool">
            <el-col :span="24">
                <el-card>
                    <!--            <el-cascader-->
                    <!--                :options="area"-->
                    <!--                :props="{ checkStrictly: true }"-->
                    <!--                size="mini"-->
                    <!--                placeholder="请选择统计区域"-->
                    <!--                clearable>-->
                    <!--            </el-cascader>-->
                    <el-button type="primary" size="mini" plain @click="handleBtn(0)">全部</el-button>
                    <el-button type="success" size="mini" plain @click="handleBtn(1)">当日</el-button>
                    <el-button type="warning" size="mini" plain @click="handleBtn(2)">近7天</el-button>
                    <el-button type="info" size="mini" plain @click="handleBtn(3)">当月</el-button>
                    <el-button type="primary" size="mini" @click="generateFile">生成信息统计表</el-button>
                    <el-date-picker
                            style="float: right"
                            v-model="dateRange"
                            size="mini"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="refreshByDateRange">
                    </el-date-picker>
                </el-card>
            </el-col>
        </el-row>
        <el-row style="margin-bottom: 20px" :gutter="20">
            <el-col :span="4">
                <el-card >
                    <div class="title"><span>复工总数</span></div>
                    <div style="height: 280px;">
                        <div style="height: 70px;padding-top: 40px; ">
                            <el-col :span="8">
                                <div>
                                    <img src="./img/statictis/enterprise.png" width="67" height="67" alt="">
                                </div>
                            </el-col>
                            <el-col :span="16">
                                <div style="color: #aeaeae"> <span style="color: red;font-size: 22px;font-weight: bold">{{totalObj.count1}}</span>  家</div>
                                <div> <p style="color: #2c2c2c; font-weight: bold;margin: 10px 0px">复工企业总数</p></div>
                            </el-col>
                        </div>
                        <div style="height: 70px;padding-top: 40px;">
                            <el-col :span="8">
                                <div>
                                    <img src="./img/statictis/person.png" width="67" height="67" alt="">
                                </div>
                            </el-col>
                            <el-col :span="16">
                                <div style="color: #aeaeae"><span style="color: dodgerblue;font-size: 22px;font-weight: bold">{{totalObj.count2}}</span>  人</div>
                                <div> <p style="color: #2c2c2c; font-weight: bold;margin: 10px 0px">复工员工总数</p></div>
                            </el-col>
                        </div>
                    </div>

                    <!--                <div class="num-total">-->
                    <!--                    <h4>复工企业总数：</h4>-->
                    <!--                    <p style="color: white;font-size: 22px;">365</p>-->
                    <!--                </div>-->
                    <!--                <div class="num-total">-->
                    <!--                    <h4>复工员工总数：</h4>-->
                    <!--                    <p style="color: red;font-size: 22px;">1700</p>-->
                    <!--                </div>-->

                </el-card>
            </el-col>
            <el-col :span="5">
                <el-card>
                    <div class="title"><span>复工企业情况</span></div>
                    <div id="fg-enterprise-situation"></div>
                </el-card>
            </el-col>
            <el-col :span="9">
                <el-card>
                    <div class="title"><span>复工企业行业情况</span></div>
                    <div id="fg-industry-situation"></div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="title"><span>{{ user.level == '3' ? '各楼宇产业园' : '各街道'}}复工企业审核中数量</span></div>
                    <div id="fg-review-situation"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row style="margin-bottom: 20px" :gutter="20">
            <el-col :span="6">
                <el-card>
                    <div class="title"><span>{{ user.level == '3' ? '各楼宇产业园' : '各街道'}}复工员工数量统计</span></div>
                    <div id="streetStaff" ></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div class="title"><span>各行业复工员工数量统计</span></div>
                    <div id="industryStaff"> </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="title"><span>企业所有制统计</span></div>
                    <div id="systemPie" ></div>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog title="企业信息" :visible.sync="centerDialogVisible" width="60%">
            <el-table :data="tableData" v-loading="tableLoading" style="width: 100%">
                <el-table-column prop="name" label="企业名称" width="180"></el-table-column>
                <el-table-column prop="street" label="所在街道" width="180"></el-table-column>
                <el-table-column prop="gsrenshu" label="公司人数"></el-table-column>
                <el-table-column prop="fgreshu" label="复工人数"></el-table-column>
                <el-table-column prop="fgshijian" label="复工日期"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination style="text-align: right"
                        :current-page.sync=pageable.num
                        :page-size.sync=pageable.pageSize
                        @current-change=currentQyChange
                        layout="total, prev, pager, next"
                        :total=pageable.total>
                </el-pagination>
            </div>
        </el-dialog>
        <el-dialog title="人员信息" :visible.sync="ryDia" width="60%">
            <el-table :data="tableData" v-loading="tableLoading" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                <el-table-column prop="qyname" label="所在企业" width="180"></el-table-column>
                <el-table-column prop="street" label="所在街道" width="180"></el-table-column>
                <el-table-column prop="fgshijian" label="复工日期"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination style="text-align: right"
                               :current-page.sync=pageable.num
                               :page-size.sync=pageable.pageSize
                               @current-change=currentRyChange
                               layout="total, prev, pager, next"
                               :total=pageable.total>
                </el-pagination>
            </div>
        </el-dialog>
    </div>

</body>
<script>
    let industries = [
        "农、林、牧、渔业",
        "采矿业",
        "制造业",
        "电力、热力、燃气及水生产和供应业",
        "建筑业",
       "批发和零售业",
        "交通运输、仓储和邮政业",
        "住宿和餐饮业",
        "信息传输、软件和信息技术服务业",
        "金融业",
        "房地产业",
        "租赁和商务服务业",
        "科学研究和技术服务业",
        "水利、环境和公共设施管理业",
        "居民服务、修理和其他服务业",
        "教育",
        "卫生和社会工作",
        "文化、体育和娱乐业",
        "公共管理、社会保障和社会组织",
        "国际组织"
    ];
    let enterpriseType = [
        "国有企业",
        "民营企业",
        "外资及港澳台企业"
    ];
    //每根柱子颜色设置
    let colors = function (params) {
        let colorList = [
            "#33B66A", "#FDCE5C", "#4B8EFF", "#FF7A7B", "#66CDF4", "#A38CF8", "#FF9561", "#CF92EF", "#8CB0EA", "#FE82B4", "#FFB158"
        ];
        return colorList[params.dataIndex%10];
    }
    let api = Constants.path + '/pb/qyxxs/';
    // 统计统一请求入口
    function calAjax(relativePath, params) {
        return axios.get(api + relativePath, {params: params}).then(function (res) {
            vueIns.reqTimes++;
            if (res.data.code === '200') {
                return Promise.resolve(res.data.data);
            } else {
                return Promise.reject(res.data.msg)
            }
        })
    }

    //1
    function drawFgEnterpriseSituation(xData, yData) {
        let el = document.getElementById("fg-enterprise-situation");
        let echartIns = echarts.init(el);
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '复工企业数量 <br/>{b} : {c} '
            },
            xAxis: {
                type: 'category',
                data: xData,
                axisTick: {
                    show: false//y轴不显示刻度线，
                },
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false//y轴不显示刻度线，
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(0,0,0,0)"//  改变轴线颜色
                    }
                },
                max: Math.max.apply(null, yData) + 5
            },
            series: [
                {
                    symbol: "none",
                    data: yData,
                    type: 'line',
                    lineStyle:{
                        normal:{
                            color:'rgba(0,0,0,0)'
                        }
                    },
                    areaStyle: {
                        normal:{
                            color:'rgba(231,243,255,1)'
                        }
                    }
                }, {
                data: yData,
                type: 'bar',
                barWidth: '25%',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 16
                            }
                        },
                        color: colors
                    }
                }
            }]
        };
        echartIns.setOption(option);
        echartIns.on('click', function (params) {
            vueIns.initTableParam();
            vueIns.currentIndex = params.dataIndex+1;
            let para = {"pageNo":0,"pageSize":10,status:4};
            para.qu = vueIns.user.qu;
            if (vueIns.user.level == '3') {
                para.street = vueIns.user.zhen;
            }
            para.renshu = params.dataIndex+1;
            vueIns.showQiYeList(para);
        });
    }

    //2
    function drawFgIndustrySituation(legendData, selected, seriesData) {
        let el = document.getElementById("fg-industry-situation");
        let echartIns = echarts.init(el);
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 0,
                top: 20,
                bottom: 20,
                data: legendData,
                selected: selected,
                formatter: function (name) {
                    if (!name) return '';
                    if (name.length > 5) {
                        name =  name.slice(0,5) + '...';
                    }
                    return name;
                },
                tooltip: {
                    show: true
                }
            },
            series: [
                {
                    name: '企业数',
                    type: 'pie',
                    radius: ['35%', '55%'],
                    center: ['40%', '50%'],
                    data: seriesData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors
                        }
                    }
                }
            ]
        };
        echartIns.setOption(option);
        echartIns.on('click', function (params) {
            vueIns.initTableParam();
            let para = {"pageNo":0,"pageSize":10,status:4};
            para.qu = vueIns.user.qu;
            if (vueIns.user.level == '3') {
                para.street = vueIns.user.zhen;
            }
            for (var i = 0;i<industries.length;i++){
                if(params.name == industries[i]){
                    para.hangye = i;
                    vueIns.currentHangye = i;
                }
            }
            vueIns.showQiYeList(para);
        });
    }

    //3
    function drawFgReviewSituation(xData, yData) {
        let el = document.getElementById("fg-review-situation");
        let echartIns = echarts.init(el);
        let option = {
            dataZoom : [
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: 7/xData.length * 100,
                    handleSize: 5
                },
                {
                    type: 'inside',
                    start: 0,
                    end: 7/xData.length * 100
                },

            ],
            tooltip: {
                trigger: 'item',
                formatter: '审核中的企业数量 <br/>{b} : {c} '
            },
            xAxis: {
                type: 'category',
                axisTick: {
                    show: false//y轴不显示刻度线，
                },
                axisLabel: {
                    interval: 0,    //强制文字产生间隔
                    rotate: 20,
                },
                data: xData
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false//y轴不显示刻度线，
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(0,0,0,0)"//  改变轴线颜色
                    }
                },
            },
            series: [
                {
                    symbol: "none",
                    data: yData,
                    type: 'line',
                    lineStyle:{
                        normal:{
                            color:'rgba(0,0,0,0)'
                        }
                    },
                    areaStyle: {
                        normal:{
                            color:'rgb(220,234,246)'
                        }
                    }
                }, {
                data: yData,
                type: 'bar',
                barWidth: '25%',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 16
                            }
                        },
                        //柱子颜色设置
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#77EE92'},
                                {offset: 1, color: '#40DBD0'}
                            ]
                        )
                    },

                }
            }]
        };
        echartIns.setOption(option)
        echartIns.on('click', function (params) {
            vueIns.initTableParam();
            let para = {"pageNo": 0, "pageSize": 10,status:2};
            vueIns.currentLouyu = params.name;
            para.qu = vueIns.user.qu;
            if (vueIns.user.level == '3') {
                para.street = vueIns.user.zhen;
                para.louyu = params.name;
            }else {
                para.street = params.name;
            }
            vueIns.showQiYeList(para);
        })
    }

    //5、按行业统计复工员工数量
    function drawIndustryStaff(xData,yData){
        // 初始化echarts实例
        let myChart = echarts.init(document.getElementById('industryStaff'));
        // 绘制图表
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} '
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    interval: 0,    //强制文字产生间隔
                    rotate: 20,
                },
                //data: ['批发和零售业', '信息传输业', '制造业', '住宿和餐饮业', '金融业', '房地产业', '教育']
                data:xData
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: "rgba(0,0,0,0)"//  改变轴线颜色
                    }
                },
            },
            series: [
                {
                    symbol: "none",
                    data: yData,
                    type: 'line',
                    lineStyle:{
                        normal:{
                            color:'rgba(0,0,0,0)'
                        }
                    },
                    areaStyle: {
                        normal:{
                            color:'rgba(231,243,255,1)'
                        }
                    }
                },{
                name: '复工员工数量',
                // data: [120, 200, 150, 80, 70, 110, 130],
                data:yData,
                type: 'bar',
                barWidth: '50%',
                itemStyle: {
                    normal: {
                        //这里是重点
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#ad83ff'},
                                {offset: 1, color: '#A077EE'}
                            ]
                        )
                    }
                }
            }]
        };
        myChart.setOption(option);//设置option
        myChart.on('click', function (params) {
            vueIns.initTableParam();
            let para = {"pageNo": 0, "pageSize": 10,status:4};
            para.qu = vueIns.user.qu;
            if (vueIns.user.level == '3') {
                para.street = vueIns.user.zhen;
            }
            for (var i = 0;i<industries.length;i++){
                if(params.name == industries[i]){
                    para.hangye = i;
                    vueIns.currentFiveHayngye = i;
                }
            }
            vueIns.showRYList(para);
        })
    }

    //4、按街道统计复工员工数量
    function drawStreetStaff(xData,yData, yData2){
        // 初始化echarts实例
        let myChart = echarts.init(document.getElementById('streetStaff'));
        // 绘制图表
        let option = {
            dataZoom : [
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: 7/xData.length * 100,
                    handleSize: 5
                },
                {
                    type: 'inside',
                    start: 0,
                    end: 7/xData.length * 100
                },

            ],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} '
            },
            legend: {
                data:['复工员工数量', '复工企业数量']
            },
            xAxis: {
                type: 'category',
                data: xData,
                axisTick: {
                    show: false//y轴不显示刻度线，
                },
                axisLabel: {
                    interval: 0,    //强制文字产生间隔
                    rotate: 20,
                },
                //data: ['平江街道', '沧浪街道', '苏锦街道', '白洋湾街道', '虎丘街道', '双塔街道', '吴门桥街道','金阊街道']
            },
            yAxis: [
                {
                    name: '员工数量',
                    type: 'value',
                    max:  Math.max.apply(null, yData) + 300,
                    axisTick: {
                        show: false//y轴不显示刻度线，
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(0,0,0,0)"//  改变轴线颜色
                        }
                    },
                },
                {
                    name: '企业数量',
                    type: 'value',
                    max: Math.max.apply(null, yData2) + 2,
                    axisTick: {
                        show: false//y轴不显示刻度线，
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(0,0,0,0)"//  改变轴线颜色
                        }
                    },
                },

            ],
            series: [{
                name: '复工员工数量',
                data: yData,
                // data: [820, 932, 901, 934, 1290, 1330, 1320,870],
                type: 'line',
                smooth: true,
            },{
                name: '复工企业数量',
                yAxisIndex: 1,
                data: yData2,
                // data: [820, 932, 901, 934, 1290, 1330, 1320,870],
                type: 'line',
                smooth: true,
            }]
        };
        myChart.setOption(option);//设置option
        myChart.on('click', function (params) {
            vueIns.initTableParam();
            let para = {"pageNo": 0, "pageSize": 10,status:4};
            vueIns.currentFourLouyu = params.name;
            para.qu = vueIns.user.qu;
            if (vueIns.user.level == '3') {
                para.street = vueIns.user.zhen;
            }
            para.street = params.name;
            //显示员工
            if(params.seriesIndex==0){
                vueIns.showRYList(para);
            }else{//显示企业
                vueIns.showQiYeList(para);
            }

        })
    }

    //按体制统计
    function drawSystemPie(xData,dataList){
        // 初始化echarts实例
        let myChart = echarts.init(document.getElementById('systemPie'));
        // 绘制图表
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data:xData,
            },
            series: [
                {
                    name: '企业所有制',
                    type: 'pie',
                    center: ['50%', '60%'],
                    radius: ['35%', '55%'],
                    data:dataList,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);//设置option
        myChart.on('click', function (params) {
            vueIns.initTableParam();
            let para = {"pageNo": 0, "pageSize": 10,status:4};
            para.qu = vueIns.user.qu;
            if (vueIns.user.level == '3') {
                para.street = vueIns.user.zhen;
            }
            for (var i = 0;i<enterpriseType.length;i++){
                if(params.name == enterpriseType[i]){
                    para.tizhi = i;
                    vueIns.currentTizhi = i;
                }
            }
            vueIns.showQiYeList(para);
        })
    }

    let vueIns = new Vue({
        el: '#app',
        data: function () {
            return {
                timeType: '1',
                dateRange: [],
                totalObj: {},
                user: JSON.parse(localStorage.getItem('user')),
                loading: true,
                reqTimes: 0,
                centerDialogVisible:false,
                ryDia:false,
                tableData:[],
                pageable:{
                    total:0,
                    num:0,
                    pageSize:10,
                },
                currentPage:0,
                currentIndex:0,//当前点击哪个柱子(第一个图)
                currentHangye:'',//第二个图
                currentLouyu:'',//当前点击哪个柱子楼宇名称(第三个图)
                currentFourLouyu:'',//第4个图
                currentFiveHayngye:'',//第5个图
                currentTizhi:'',//第6个图
                tableLoading: true
            }
        },
        watch: {
            reqTimes: {
                handler() {
                    if (this.reqTimes > 5) {
                        this.loading = false;
                    }
                }
            }
        },
        methods:{
            initTableParam(){
                let self = this;
                self.currentIndex = 0;
                self.currentLouyu = '';
                self.currentHangye='';
                self.currentFourLouyu = '';
                self.currentFiveHayngye = '';
                self.currentTizhi = '';
            },
            currentQyChange(value) {
                let self = this;
                let para = {"pageNo":value,"pageSize":10};
                para.qu = vueIns.user.qu;
                if (self.user.level == '3') {
                    para.street = self.user.zhen;
                }
                if(self.currentIndex!=0){
                    para.renshu = self.currentIndex;
                    para.status = 4
                }
                if(self.currentHangye){
                    para.hangye = self.currentHangye;
                    para.status = 4;
                }
                if(self.currentLouyu){
                    if (vueIns.user.level == '3') {
                        para.street = vueIns.user.zhen;
                        para.louyu = self.currentLouyu;
                    }else {
                        para.street = self.currentLouyu;
                    }
                    para.status = 2
                }
                if(self.currentFourLouyu){
                    para.street = self.currentFourLouyu;
                }
                if(self.currentTizhi){
                    para.tizhi = self.currentTizhi;
                    para.status = 4
                }
                self.showQiYeList(para);
            },
            currentRyChange(value) {
                let self = this;
                let para = {"pageNo":value,"pageSize":10,status:4};
                para.qu = vueIns.user.qu;
                if (self.user.level == '3') {
                    para.street = self.user.zhen;
                }
                if(self.currentFiveHayngye){
                    para.hangye = self.currentFiveHayngye
                }
                if(self.currentFourLouyu){
                    para.street = self.currentFourLouyu
                }
                self.showRYList(para);
            },
            //下载汇总表
            generateFile() {
                let url = '/qysqbs/export2'
                if (this.user.level == '2') {
                    url += '?qu=' + this.user.qu;
                } else if (this.user.level == '3') {
                    url += '?street=' + this.user.zhen;
                }
                window.location.href = Constants.path + url;
            },
            // 日期选择框数据刷新
            refreshByDateRange() {
                this.showAll(4, this.dateRange[0], this.dateRange[1]);
            },
            // 构造标准横纵坐标轴
            initXDataYData(data) {
                let xData = [];
                let yData = [];
                let yData2 = [];
                let yData3 = [];
                data.forEach( function (item) {
                    xData.push(item.name);
                    yData.push(item.count1);
                    yData2.push(item.count2);
                    yData3.push(item.count3);
                });
                return {xData, yData, yData2, yData3}
            },
            // 处理请求参数
            handleParams(timeType, start, end) {
                let params = {status: '4'};
                if (timeType === 1 || timeType === 2 || timeType === 3) {
                    params.shijian = timeType;
                }
                else if (timeType === 4) {
                    params.starttime = start.toLocaleDateString();
                    params.endtime = end.toLocaleDateString();
                }
                return params;
            },
            // 涉及街道要展示的楼宇的处理
            handleAjaxOption(params) {
              let level = this.user.level;
              let res = {url: 'countByZhenAndTime', params};
              if (level == '3') {
                  res.url = 'countByLouyuAndTime';
                  res.params.street = this.user.zhen;
              }
              return res;
            },
            // 复工总数初始化
            initFgEnterpriseTotalSituation(timeType, start, end) {
                let params = this.handleParams(timeType, start, end);
                let self = this;
                let url = 'countByQuAndTime';
                let queryName = this.user.qu;
                if (this.user.level == '3') {
                    url = 'countByZhenAndTime';
                    queryName = this.user.zhen;
                }
                calAjax(url, params).then(function (data) {
                    data.forEach(function (item) {
                        if (item.name === queryName) {
                            self.totalObj = item;
                        }
                    })
                })
            },
            showQiYeList(para){
                let self = this;
                let params = para;
                let url = "/action/findQyVoByAll";
                self.centerDialogVisible = true;
                self.tableLoading = true;
                calAjax(url, params).then(function (data) {
                    self.tableData = data.records;
                    self.pageable.total = data.total;
                    self.tableLoading = false;
                })
            },
            showRYList(para){
                let self = this;
                let params = para;
                let url = "/action/findRyVoByAll";
                self.ryDia = true;
                self.tableLoading = true;
                calAjax(url, params).then(function (data) {
                    self.tableData = data.records;
                    self.pageable.total = data.total;
                    self.tableLoading = false;
                })
            },
            // 根据人数区分
            initFgEnterpriseSituation(timeType, start, end) {
                let params = this.handleParams(timeType, start, end);
                let url = 'countRenshuByQuAndTime';
                let queryName = this.user.qu;
                if (this.user.level == '3') {
                    url = 'countRenshuByZhenAndTime';
                    queryName = this.user.zhen;
                }
                calAjax(url, params).then(function (data) {
                    let xData = ['小于30人', '30-100人', '100人以上'];
                    let yData = [];
                    data.forEach(function (item) {
                        if (item.name === queryName) {
                            yData.push(item.count1);
                            yData.push(item.count2);
                            yData.push(item.count3);
                        }
                    })
                    drawFgEnterpriseSituation(xData, yData);
                })
            },
            // 各行业复工企业数
            initFgIndustrySituation(timeType, start, end) {
                let params = this.handleParams(timeType, start, end);
                let url = 'countHangyeByQuAndTime';
                let queryName = this.user.qu;
                if (this.user.level == '3') {
                    url = 'countHangyeByZhenAndTime';
                    queryName = this.user.zhen;
                }
                calAjax(url , params).then(function (data) {
                    let seriesData = [];
                    let legendData = [];
                    let yData = [];
                    let selected = [0, 1, 2, 3, 4, 5, 6];
                    data.forEach(function (item) {
                        if (item.name === queryName) {
                            let industryName = industries[item.beizhu];
                            legendData.push(industryName);
                            seriesData.push({
                                name: industryName,
                                value: item.count1
                            });
                            yData.push(item.count2);
                        }
                    });
                    drawFgIndustrySituation(legendData, selected, seriesData);
                    drawIndustryStaff(legendData,yData);
                })
            },
            // 分街道显示审核中
            initFgReviewSituation(timeType, start, end) {
                let params = this.handleParams(timeType, start, end);
                params.status = '2';
                let ajaxOption = this.handleAjaxOption(params);
                let self = this;
                calAjax(ajaxOption.url, ajaxOption.params).then(function (data) {
                    let initXDataYData = self.initXDataYData(data);
                    drawFgReviewSituation(initXDataYData.xData, initXDataYData.yData)
                })
            },
            // 第二行第一个
            initZhenReviewSituation(timeType, start, end){
                let params = this.handleParams(timeType, start, end);
                let ajaxOption = this.handleAjaxOption(params);
                let self = this;
                calAjax(ajaxOption.url,ajaxOption.params).then(function (data) {
                    let initXDataYData = self.initXDataYData(data);
                    drawStreetStaff(initXDataYData.xData, initXDataYData.yData2, initXDataYData.yData);
                })
            },
            // 第二行第三个
            initSystemIndustrySituation(timeType, start, end){
                let params = this.handleParams(timeType, start, end);
                let url = 'countTizhiByQuAndTime';
                let queryName = this.user.qu;
                if (this.user.level == '3') {
                    url = 'countTizhiByZhenAndTime';
                    queryName = this.user.zhen;
                }
                calAjax(url,params).then(function (data) {
                    let xData = [];
                    let dataList = [];
                    data.forEach( function (item) {
                        if (item.name === queryName) {
                            let enterpriseTypeLabel = enterpriseType[item.beizhu];
                            xData.push(enterpriseTypeLabel);
                            dataList.push({value: item.count1, name: enterpriseTypeLabel});
                        }
                    });
                    drawSystemPie(xData,dataList);
                })
            },

            // 图标初始化总入口函数
            // timeType 0为默认 1 当日 2 近7天 3 当月 4 时间段
            showAll(timeType, start, end) {
                this.loading = true;
                this.reqTimes = 0;
                this.initFgEnterpriseTotalSituation(timeType, start, end);
                this.initFgEnterpriseSituation(timeType, start, end);
                this.initFgIndustrySituation(timeType, start, end);
                this.initFgReviewSituation(timeType, start, end);
                this.initZhenReviewSituation(timeType, start, end);
                this.initSystemIndustrySituation(timeType, start, end);
            },
            handleBtn(timeType) {
                this.dateRange = [];
                this.showAll(timeType)
            }
        },
        mounted(){
            this.showAll(0);
        }
    })
</script>
</html>